import { Input, NavBar, TextArea } from 'antd-mobile'
import { useState } from 'react'
import { InputShow } from '../Edit'

import styles from './index.module.scss'

type Props = {
  onClose: () => void
  name: string
  updateInfo: (type: string, val: string, onClose: () => void) => void
  type: InputShow['type']
}

const EditInput = ({ onClose, name = '--', updateInfo, type }: Props) => {
  const [value, setValue] = useState(name)

  const isName = value === 'name'
  return (
    <div className={styles.root}>
      <NavBar
        onBack={onClose}
        className="navbar"
        right={
          <span
            onClick={() => updateInfo(type, value, onClose)}
            className="commit-btn">
            提交
          </span>
        }>
        编辑{isName ? '昵称' : '简介'}
      </NavBar>

      <div className="edit-input-content">
        <h3>{isName ? '昵称' : '简介'}</h3>

        {isName ? (
          <div className="input-wrap">
            {/* 
            react受控 => value + onchange
            onChange={(n) => setNewName(n)} => 简写 onChange={setNewName}
          */}
            <Input value={value} onChange={setValue} placeholder="请输入昵称" />
          </div>
        ) : (
          <TextArea
            className="textarea"
            placeholder="请输入简介"
            // 展示：右下角的字数统计
            showCount
            // 指定内容最大长度
            maxLength={100}
            // 指定 文本域 展示内容的行数（文本域高度）
            rows={4}
            value={value}
            onChange={setValue}
          />
        )}
      </div>
    </div>
  )
}

export default EditInput
